<template>
  <!-- group-map 中单个 client-path 确认同步文件的弹窗 -->
  <n-modal
    v-model:show="syncModal"
    preset="dialog"
    :bordered="false"
    :segmented="{content: 'soft', footer: 'soft'}"
    :show-icon="false"
    :maskClosable="false"
    :style="{ width: '40em' }"
    >
      <template #header>
        <span> 立即同步 Synchronize Now &nbsp;  </span>
      </template>
      
      <div class="section">
        <div class="client-info">
          <label>源：</label> * <br/>
          {{ groupMap.source }}
        </div>
        <div class="client-info">
          <label>目标：</label>
          <template v-if="groupMap.targetClientNode">
            {{ groupMap.targetClientNode.name }} ({{ groupMap.targetClientNode.host }}:{{ groupMap.targetClientNode.port }})
          </template>
          <br/>
          {{ groupMap.target }}
        </div>

        <div class="note-tip">以下规则仅适用于本次同步！</div>

        <!-- 仅存在Client上的文件： -->
        <div class="section">
          <label class="title">仅存在Client上的文件：</label>
          <n-radio-group v-model:value="syncMeta.fileOnlyOnClient" name="文件重名" :disabled="false">
            <n-radio :value="0">不处理</n-radio>
            <n-radio :value="1">删除</n-radio>
          </n-radio-group>
        </div>

        <!-- 重名覆盖规则 -->
        <div class="section">
          <p style="font-size: 0.8em;line-height:0.8em ">文件重名规则对无变化的文件无效。（无变化判定： server文件 与 client 文件修改时间不一致）</p>
          <label class="title">文件重名：</label>
          <n-radio-group v-model:value="syncMeta.cover" name="文件重名" :disabled="false">
            <n-radio :value="true">覆盖</n-radio>
            <n-radio :value="false">保留</n-radio>
          </n-radio-group>
        </div>

        <div v-if="syncMeta.fileOnlyOnClient && !syncMeta.cover" class="warnning-text">“删除” + “保留” 无意义！</div>

        <!-- 重写保存路径 -->
        <div class="section">
          <label> 重写路径： </label>
          <n-input type="text" v-model:value="syncMeta.rewritePath" size="tiny"
          :disabled="false" placeholder=":/?-{yyyy-MM-dd HH:mm:ss}" />
          <div style="font-size: 0.8em"> 
            必须以 ':' 开头， ':' 代表 {{groupMap.target}}。<br/>
            '?'代表原文件相对 {{groupMap.target}} 的子路径。 <br/>
            可以使用时间占位符 '{yyyy-MM-dd HH-mm-ss}' （即 java 格式化时间）<br/>
            <span class="impl">注意：文件名不能出现 :? 等字符！</span><br>
            例如，  :/{yyyy-MM-dd}/? &nbsp;&nbsp; :/{yyyy-MM-dd} {HH-mm}/? &nbsp;&nbsp; :/?-{yyyy-MM-dd HH-mm-ss}
          </div>
        </div>

      </div>
      
      <div style="display: flex; justify-content: flex-end">
        <n-button round type="primary" style="margin-right: 4px;" 
          @click="comfirSyncFolder()" :loading="syncLoading">
          同步
        </n-button>
        <n-button round type="warning" @click="close()" >
          取消
        </n-button>
      </div>
  </n-modal>
</template>

<script setup>
import { ref, inject } from 'vue'
import serverApi from '/src/api/fsync/server.js'

const syncModal = ref(false)
const groupMap = ref({})

const syncLoading = ref(false)
const syncMeta = ref({ // 后续改成可以修改本次的设置
  fileOnlyOnClient: 0,
  rewritePath:  ':/{yyyy-MM-dd}/?', //':/?',
  cover: false,
})

const Message = inject("Message")
const Dialog = inject("Dialog")

// 确认同步
const comfirSyncFolder = async () => {
  Dialog.warning({
    title: '同步确认',
    content: '是否开始同步？',
    positiveText: '确认',
    negativeText: '取消',
    maskClosable: false,
    onPositiveClick: () => {
      syncFolder(groupMap.value)
    },
  })
}
// 同步文件夹
const syncFolder = (gm) => {
  let data = {
    name: gm.name,
    clientNode: gm.targetClientNode,
    source: gm.source,
    target: gm.target,
    rewritePath: syncMeta.value.rewritePath,
    cover: syncMeta.value.cover,
    fileOnlyOnClient: syncMeta.value.fileOnlyOnClient,
  }
  
  syncLoading.value = true
  serverApi.async(data).then(res => {
    syncLoading.value = false
    let msg = res.data
    if(!msg) {
      msg = "同步完成"
    }
    Message.success( msg, { closable: true, duration: 3000 } )
  }, err => {
    syncLoading.value = false
    Message.error( err.message, { closable: true, duration: 3000 } )
    console.error(err)
  })
}

const show = (data) => {
  //syncFolder(groupMap)
  groupMap.value = data
  syncModal.value = true

  syncMeta.value.rewritePath = data.rewritePath
  syncMeta.value.cover = data.cover == 1
  syncMeta.value.fileOnlyOnClient = data.fileOnlyOnClient ? data.fileOnlyOnClient : 0
}
const close = () => {
  syncModal.value = false
}

defineExpose({
  show, close
})
</script>

<style scoped lang="scss">
.section{
  margin: 0.5em 0.2em;
  color: gray;

  label{
    color: black;
  }
  .title{
    display: inline-block;
    width: 11em;
    text-align: left;
  }
}

.note-tip{
  color: black;
  font-weight: bold;
  margin: 1.5em 0em;
}
.client-info{
  padding: 0.3em 0em;
}
.impl{
  color: black;
}

</style>
